<template>	        
	<view class='p-20'>
		<loading ref="loading"></loading>
		<view>
			<navbar :bgColor="bgColor" title="会员权益" :isGoBack="true" :isNotice="true" ></navbar>
		</view>
		<view class="border-b mb-10 box-shadow-radius" v-for="(item,index) in list" :key="index" style="margin-top:35rpx !important;border-radius: 60rpx !important;" >				
			<view class="flex align-center top-cell border-radius-t" slot='content'>
				<view class='flex align-center cell text-lg'>
					<view class="rectangle" v-if="(item.id==level)"></view>
					<view class="level_img" :style="{'margin-left':item.id!=level?'20rpx':'','backgroundImage':'url(' + item.icon + ')'}"></view>
					<view class="title text-lg ellipsis" style="margin-left: 20rpx;">{{item.level_name}}</view>
				</view>
			</view>				
			<view class="border-radius-b cell-footer text-df text-gray">
			<view class="ellipsis-l2" style="color: #353340;">交易金额满 {{item.total_pricle}}元</view>
				<view class="ellipsis-l2 mt-25 pb-30">{{item.level_intro}}</view>
			</view>
		</view>		
	</view>		
</template>
<script>
	export default {		
		data() {
			return {
				bgColor:'#2B91ED',
				list:'',
				level:'',
				lodint:true
			};
		},
		// 生命周期函数--监听页面加载
		onLoad() {				
			let token=uni.getStorageSync('userInfo').app_openid
			let that=this
			this.$http.member_level({token,login_type:'app'}).then(res=>{
			   if(res.resCode=='9999'){				
				  that.list=res.data.level_info;
				  that.level=res.data.level;				
			   }
			})
		},
		onShow(){
		},
		mounted: function () {	
		    //在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
		    this.$nextTick(function () {
			   setTimeout(()=>{
					this.$refs.loading.hideLoading();
			   },2000)			
		    })
		}
	}
</script>
<style>
	@import "./index.css";
</style>